import React, { useCallback, useEffect, useState } from "react";
import {useNavigate} from 'react-router-dom';
import {Button } from 'antd'
import request from '@/utils/request'

import moviesCss from './Will_movie.module.css' 

function WillMovie() {
    const [datalist, setDatalist] = useState([])
    const navigate = useNavigate()
    // GET /api/movies/comelist
    //ajax 写法1
    useEffect(() => {
        request.get('/movies/comelist').then(({ data }) => {
            console.log('comedatalist', data)
            setDatalist(data.data)
        })
    }, [])

    //ajax 写法2
    // const getData = useCallback(async ()=>{
    //     const {data} = await request.get('/movies/list')
    //     console.log('data',data)
    // },[])
    // useEffect(()=>{
    //     getData()
    // },[])

    // 拿到当前页面的路径的方法  /movie/will
    //  const urlParams = new URL(window.location.href);
    //  const pathname = urlParams.hash.substring(1)
    //  console.log("pathname:", pathname);

    const goDatail = useCallback((id)=>{
        navigate(`/detail/${id}`)
    },[])

    return (
        <div>
            <>
                <ul>
                    {
                        datalist.map(item => {
                            return  <li  key={item.filmId} className={moviesCss.list} >
                                <div onClick={goDatail.bind(null,item.filmId)}>
                                    <img src={item.poster} className={moviesCss.poster} /> 
                                    <div className={moviesCss.content}>
                                        <h4>{item.name}</h4>
                                        <p className={moviesCss.text}>导演：{item.director}</p>
                                        <p className={moviesCss.text}>类型：{item.category}</p>       
                                    </div>             
                                </div>
                                <Button className={moviesCss.btn} >预购</Button>   
                            </li>
                        })
                    }
                </ul>
            </>
        </div>
    )
}

export default WillMovie;